<template>
	<view class="home">
		<view style="position: fixed;top: 0;width: 100%;z-index: 999;background: #fff;">
			<view class="top">
				<view class="main">
					<image src="http://fcdn.qiushilaile.com/game/default-36311630920450536.png"></image>
					<input type="text" @input="bindinput" @confirm="search" :value="value" placeholder="请输入内容" />
				</view>
				<view class="search" @click="search">搜索</view>
			</view>
		</view>
		<view style="height:90px;"></view>
		<view class="hot">
			<view class="hot-list">
				<navigator class="hot-item" :url="`/pages/start/start?id=${item.Id}&typeId=${item.typeId}`" v-for="(item, index) in list"
					:key="index">
					<image class="icon" :src="item.ImgUrl"></image>
					<view class="content">
						<view class="title">{{item.Title}}</view>
						<view class="subtitle">{{item.Descrption}}</view>
					</view>
					<view class="goTest">立即测试</view>
					<image class="btn" src="../../static/img/ceshi.png"></image>
				</navigator>
			</view>
		</view>
		<view class="isNull" v-if="isNull">暂无测试题</view>
		<uni-load-more class="loading" color="#000" :status="loadStatus" :icon-size="18" 
		 :showIcon="true" :contentText="noLoadingText">
		</uni-load-more>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isNull: '',
				more: false,
        value: '',
        barHeight: '',
				isMore: true, // 是否加载更多
				loadStatus: "more",
				list: [], // 大家都在玩列表
				goodsId: '', 
				noLoadingText: {
					contentdown: "上拉加载更多",
					contentrefresh: "正在加载...",
					contentnomore: "",
				},
				params: {
					c: 0,
					pidx: 0,
					appId: 'ttb2dfc4622de58bd4',
					title: '',
				}, // 普通
			}
		},

		methods: {
      bindinput(e) {
        let value = e.detail.value.replace(/\s/g,"");
        this.params.title = value
      },
			search() {
				console.log('点击搜索');
				this.params.c = 0;
				this.params.pidx = 0;
				if(this.params.title == '') {
					tt.showToast({
						title: "请输入关键字",
						duration: 2000,
					})
				} else {
					this.fetch1()
				}
			},
			async fetch() {
				this.loadStatus = "loading"
				await this.request({
					url: '/GetList.ashx', 
					data: this.params
				}).then(result => {
					this.list = this.list.concat(result)
					console.log('result.length==', result.length)
					if (result.length < 10) {
						console.log('111==', result.length)
						this.loadStatus = "noMore"
					} else {
						this.loadStatus = "more"
					}
				})
			},
			async fetch1() {
				this.loadStatus = "loading"
				this.list = [];
				this.isNull = false;
				await this.request({
					url: '/GetList.ashx', 
					data: this.params
				}).then(result => {
					console.log(result);
					if (result == '') {
            console.log('没有搜索结果');
            this.isNull = true
          }
					this.list = this.list.concat(result)
					console.log('result.length==', result.length)
					if (result.length < 10) {
						console.log('111==', result.length)
						this.loadStatus = "noMore"
					} else {
						this.loadStatus = "more"
					}
				})
			},
		},
    computed: {
			navbarStyle() {
				return `height: ${40 + this.barHeight}px; padding-top: ${this.barHeight}px`
			}
		},
		onLoad(options) {
      const {
				barHeight
			} = getApp().globalData
			this.barHeight = barHeight
			this.fetch()
		},
		onReachBottom() { // 上拉加载
			this.params.pidx = this.params.pidx + 10;
			// console.log(this.params.title);
			this.fetch()
		}
	}
</script>

<style lang="scss" scoped>
	.isNull {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	.top {
		height: 154rpx;
		// background: pink;
		margin-bottom: 20rpx;
		display: flex;
		flex-direction: row;
		position: relative;
		color: #6F7583;
		font-size: 14px;
		// border-radius: 5px;
		border-bottom: 5px solid #f1f1f1;
	}
	.main {
		width: 75%;
		background: #F1F1F1;
		border-radius: 50px;
    height: 40px;
    margin-top: 20px;
    margin-left: 20px;
    position: relative;
	}
	.top input {
		width: 200px;
		height: 40px;
		transform: translate(45px, 0px);
		color: #8E8EB5;
	}
	.top image {
		height: 15px;
		width: 15px;
		position: absolute;
		left: 5%;
		top: 35%;
	}
	.search {
		width: 50px;
		position: absolute;
		right: 5%;
		top: 38%;
		text-align: right;
		font-size: 17px;
    color: #000;
    font-weight: bold;
		// border-left: 2px solid #101529;
	}
  .home {
		position: relative;
		min-width: 100vw;
		min-height: 100vh;
	}

  .navbar {
		position: fixed;
		width: 100%;
		display: flex;
		align-items: center;
		padding: 0 20rpx;
		z-index: 5;
	}
	.loading{
		width: 100%;
		height: 80rpx;
		z-index: 100;
		position: absolute;
	}
	.scroll-box {
		width: 100%;
		height: 302rpx;
	}
	.selected {
		padding: 0 22rpx 1rpx;

		&-title {
			display: flex;
			align-items: center;
			padding: 36rpx 0;
			font-size: 36rpx;
			line-height: 1;
			color: #333333;

			image {
				width: 36rpx;
				height: 36rpx;
				margin-right: 18rpx;
			}

			text {
				z-index: 2;
				color: #FFFFFF;
				font-weight: bold;
			}
		}

		&-tip {
			color: #999999;
			font-size: 20rpx;
			z-index: 2;
			margin-left: auto;
		}

		&-list {
			display: flex;
			width: 100%;
		}

		&-item {
			flex-shrink: 0;
			width: 212rpx;
			height: 300rpx;
			border-radius: 12rpx;
			// box-shadow: 0px 0px 20rpx 0px rgba(0, 0, 0, 0.20);
			overflow: hidden;
			margin-left: 34rpx;
			position: relative;

			&:first-child {
				margin-left: 0;
			}

			.icon {
				width: 120rpx;
				height: 120rpx;
				position: absolute;
				margin: 0rpx 46rpx 0 46rpx;
				z-index: 11;
				border-radius: 10rpx;
			}

			.title {
				top: 140rpx;
				font-size: 28rpx;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
				color: #FFFFFF;
				position: absolute;
				left: 5%;
				width: 90%;
				text-align: center;
			}

			.bg {
				width: 100%;
				margin-top: 40rpx;
				height: 100%;
				display: block;
			}

			.text-bg {
				position: absolute;
				bottom: 20rpx;
				left: 15%;
				display: block;
				height: 54rpx !important;
				line-height: 54rpx;
				width: 70%;
				border-radius: 27rpx;
				height: 34rpx;
			}

			text {
				position: absolute;
				bottom: 20rpx;
				left: 15%;
				display: block;
				height: 54rpx !important;
				line-height: 54rpx;
				width: 70%;
				color: #FFFFFF;
				border-radius: 27rpx;
				font-size: 25rpx;
				height: 34rpx;
				text-align: center;
			}
		}
	}
	.hot {
		&-list {
			// margin-top: 20px;
		}

		&-title {
			display: flex;
			align-items: center;
			padding: 36rpx 0;
			font-size: 36rpx;
			line-height: 1;
			color: #333333;

			image {
				width: 36rpx;
				height: 36rpx;
				margin-right: 18rpx;
			}

			text {
				color: #FFFFFF;
			}

		}

		&-item {
			display: flex;
			padding: 15rpx 48rpx 15rpx 48rpx;
			height: 190rpx;
			width: 750rpx;
			background-image: url(../../static/img/card_bg.png);
			background-repeat: no-repeat;
			background-position: center;
			background-size: cover;
			margin-top: 20rpx;
			position: relative;

			&:first-child {
				margin-top: 0;
			}

			.icon {
				width: 160rpx;
				height: 160rpx;
				flex-shrink: 0;
				border-radius: 10rpx;
				overflow: hidden;
				margin-right: 24rpx;
				// margin-left: -40rpx;
			}

			.content {
				flex: 1;
				margin-top: 20rpx;

				.title {
					color: #000;
					font-weight: bold;
					font-size: 30rpx;
					line-height: 44rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					width: 350rpx;
				}

				.subtitle {
					color: #787878;
					font-size: 24rpx;
					line-height: 34rpx;
					width: 350rpx;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
				}
			}

			.goTest {
				border-radius: 20rpx;
				height: 50rpx;
				position: absolute;
				bottom: 15rpx;
				right: 40rpx;
				font-size: 24rpx;
				padding: 8rpx 20rpx 5rpx 20rpx;
				z-index: 10;
				color: #86582A;
				font-weight: bold;
			}

			.btn {
				width: 140rpx;
				height: 48rpx;
				position: absolute;
				bottom: 15rpx;
				right: 40rpx;
				z-index: 9;
			}
		}
	}
	.swiper-cover {
		padding: 20rpx 0 4rpx;
		height: 420rpx;
		margin-top: 198rpx;

		.swiper-item {
			width: 100%;
			height: 100%;
			padding: 0 24rpx;

			image {
				width: 100%;
				height: 100%;
				border-radius: 10rpx;
				overflow: hidden;
			}
		}
	}
	
</style>
